<template>
  <div class="homepage" style="display: flex; align-items: center; justify-content: space-between; width: 1300px;">

  <!-- 使用echarts（具体是哪种图形，取决于option的内容） -->
    <e-charts class="chart1" :option="option1" />

    <e-charts class="chart2" :option="option2" />
  </div>
</template>


<script setup>
/* 去官网粘一个option即可 */
// import axios from 'axios';
//  onMounted = () => {
//   getUserList();
// };
// const getUserList = () => {
//   axios.get('/user/SelectAll').then((res) => {
//     const result = res.data;
//     console.log(res);
//   });
// };

import axios from 'axios';
import {onMounted, ref} from 'vue';
// 页面加载完成后，调用getOption()方法，获取option
onMounted(() => {
  getOption1(); 
  getOption2();
})

// 定义一个变量，用来存储option1
const option1 = ref('');
// 定义一个方法，用来获取option1
const getOption1 = () => {
   axios.get('/us/getTB')
   .then((res) => {
     const result = res.data;
     if(result.code == 1){
      
      console.log(result.data);
      
       option1.value = {
        title: {
          text: '系统用户角色分布',
          subtext: '人数统计',
          left: 'center'
        },
  			tooltip: {
    		trigger: 'item'
  			},
        legend: {
        orient: 'vertical',
        left: 'left'
      },
  		series: [
    	{
      		name: '系统用户',
      		type: 'pie',
      		radius: ['40%', '70%'],
      		avoidLabelOverlap: false,
      		itemStyle: {
        		borderRadius: 10,
        		borderColor: '#fff',
        		borderWidth: 2
      		},
      	label: {
        	show: true,
        	position: 'center'
      	},
        labelMap: {
          '1': '管理员',
          '2': '咨询师',
          '3': '客服'
        },
      	emphasis: {
        	label: {
          	show: true,
          	fontSize: 40,
          	fontWeight: 'bold'
        	}
      	 },
      		labelLine: {
        		show: false
      		},
      		data: result.data
    		}
  		]
	};
     }
   }) 
  }

  // 定义一个变量，用来存储option2
const option2 = ref('');
// 定义一个方法，用来获取option2
const getOption2 = () => {
   axios.get('/consult/getCount')
   .then((res) => {
     const result = res.data;
     if(result.code == 1){
      
      console.log(result.data);
      
       option2.value = {
        title: {
          text: '咨询师认证信息',
          subtext: '人数统计',
          left: 'center'
        },
  			tooltip: {
    		trigger: 'item'
  			},
        legend: {
        orient: 'vertical',
        left: 'left'
      },
  		series: [
    	{
      		name: '认证数据',
      		type: 'pie',
      		radius: ['40%', '70%'],
      		avoidLabelOverlap: false,
      		itemStyle: {
        		borderRadius: 10,
        		borderColor: '#fff',
        		borderWidth: 2
      		},
      	label: {
        	show: true,
        	position: 'center'
      	},
        labelMap: {
          '1': '管理员',
          '2': '咨询师',
          '3': '客服'
        },
      	emphasis: {
        	label: {
          	show: true,
          	fontSize: 40,
          	fontWeight: 'bold'
        	}
      	 },
      		labelLine: {
        		show: false
      		},
      		data: result.data
    		}
  		]
	};
     }
   }) 
  }

</script>
<style scoped>
/* 我们必须给一个高度/宽度，不然echarts图表无法显示出来 */
.chart1 {
  height: 650px;
  width: 650px;
  background-color: wheat;
}
.chart2 {
  height: 650px;
  width: 650px;
  background-color: wheat;
}
</style>